<script setup>
import * as echarts from "echarts"
import useDelayedRate from "@/api/delayedRate/useDelayedRate.js";
import { onMounted } from "vue";

const get = useDelayedRate()

let count = []
let rate = []
let name = []

onMounted(() => {
  get().then(res => {
    const data = res.data.data
    data.forEach(item => {
      count.push(item.count)
      rate.push(item.delayCount)
      name.push(item.companyName)
    })
  }).then( () => {
    let chartDom = document.getElementById('main');
    let myChart = echarts.init(chartDom);
    let option;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      xAxis: [
        {
          type: 'category',
          data: name,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '次数',
          min: 0,
          max: 100,
          interval: 50,
          axisLabel: {
            formatter: '{value} 次'
          }
        },
        {
          type: 'value',
          name: '延误率',
          min: 0,
          max: 100,
          interval: 5,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name: 'Precipitation',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 次';
            }
          },
          data: count
        },
        {
          name: 'Temperature',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + '%';
            }
          },
          data: rate        }
      ]
    };

    option && myChart.setOption(option);
  })
})




</script>

<template>
  <div id="main" style="width: 100%;height:100%;"></div>
</template>

<style scoped>

</style>